<template>
    <div>
        <van-divider>页面信息</van-divider>
        <div class="page-info">
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="pageInfo.title" name="标题" label="标题" placeholder="标题" />
                    <van-field v-model="pageInfo.desc" name="描述" label="描述" placeholder="描述" />
                    <van-field v-model="pageInfo.url" name="url" label="url" placeholder="url" />
                    <van-field v-model="pageInfo.category" name="分类" label="分类" placeholder="分类" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        提交
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { addBookmark } from '@/utils/api'
import { showNotify } from 'vant';
const pageInfo = ref(
    {
        title: "New Bookmark",
        url: "https://www.example.com",
        category: "Test",
        tag: [],
        sort: 1
    }
)

// background.js 或 popup.js （取决于你想要在哪里获取信息）
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    const currentTab = tabs[0];
    pageInfo.value.icon = currentTab.favIconUrl;
    pageInfo.value.url = currentTab.url;
    pageInfo.value.title = currentTab.title;
    pageInfo.value.desc = currentTab.title;

    // 使用 URL 执行某些操作，例如在弹出窗口中显示它
});

function onSubmit() {
    console.log(JSON.parse(JSON.stringify(pageInfo.value)))
    addBookmark(JSON.parse(JSON.stringify(pageInfo.value))).then((res) => {
        showNotify({ type: 'success', message: '添加成功' });
    }).catch((err) => {
        showNotify({ type: 'error', message: '添加失败' });
    })

}


</script>

<style>
.page-info {
    background-color: aliceblue;
    width: 100%;
    zoom: 1;
}
</style>